<!-- 审稿页面 -->
<template>
  <div class="lab-container">
    <!-- 内容区域 -->
    <main class="container my-5">
      <div class="row">
        <!-- 左侧标签页 -->
        <div class="col-md-2">
          <div class="border p-3">
            <h5 class="mb-3">审批稿件</h5>
            <div class="nav flex-column nav-pills">
              <button
                v-for="(tab, index) in tabs"
                :key="index"
                class="nav-link text-start"
                :class="{ active: activeTab === index }"
                @click="activeTab = index"
              >
                {{ tab.title }}
              </button>
            </div>
          </div>
        </div>

        <!-- 右侧内容区域 -->
        <div class="col-md-9">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item">
                <router-link to="/">首页</router-link>
              </li>
              <li class="breadcrumb-item">
                <router-link to="/approveManuscripts">审批稿件</router-link>
              </li>
              <li class="breadcrumb-item active">
                {{ tabs[activeTab].title }}
              </li>
            </ol>
          </nav>

          <div class="content-box border p-4">
            <!-- 动态内容区域 -->
            <template v-if="activeTab === 0">
              <h3 class="mb-4">敏感词汇总：</h3>
              <!-- 横线 -->
              <div class="custom-divider my-4"></div>
              <div class="container py-4">
                <span
                  class="col"
                  v-for="(data, index) in periodicalSensitiveWordList"
                  :key="index"
                >
                  <span target="_blank" :href="data.src">{{ data }}</span>
                </span>
              </div>
            </template>

            <template v-if="activeTab === 1">
              <h3 class="mb-4">待审核稿件</h3>
              <div class="container py-4">
                <div class="table-responsive">
                  <table class="table align-middle">
                    <thead>
                      <tr>
                        <th>稿件名</th>
                        <th>作者</th>
                        <th>稿件状态</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="data in manuscriptPageList" :key="data.id">
                        <td data-label="姓名" class="fw-medium">
                          {{ data.name }}
                        </td>
                        <td data-label="作者">
                          {{ data.authors }}
                        </td>
                        <td data-label="状态">
                          <span v-if="data.status === 0">待审核</span>
                          <span v-if="data.status === 1">已审核</span>
                          <span v-if="data.status === 2">不通过</span>
                        </td>
                        <td>
                          <button
                            class="btn btn-sm me-2"
                            style="background-color: #133068; color: white"
                            @click="showDetail(data.content)"
                          >
                            查看
                          </button>
                          <button
                            v-if="data.status === 0"
                            class="btn btn-sm me-2"
                            style="background-color: #ecca2f; color: white"
                            @click="handleApprove(data.id)"
                          >
                            同意
                          </button>
                          <button
                            v-if="data.status === 0"
                            class="btn btn-sm"
                            style="background-color: #4d5d9c; color: white"
                            @click="showRejectDialog(data.id)"
                          >
                            不通过
                          </button>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <!-- 查看详情模态框 -->
              <div
                class="modal fade"
                :class="{ show: showDetailModal, 'd-block': showDetailModal }"
              >
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">内容</h5>
                      <button
                        type="button"
                        class="btn-close"
                        @click="closeDetailModal"
                      ></button>

                    </div>
                    <div class="modal-body">
                      {{ selectedItem }}
                    </div>
                  </div>
                </div>
              </div>
              <div
                v-if="showDetailModal"
                class="modal-backdrop fade show"
              >
              </div>

              <!-- 拒绝原因模态框 -->
              <div
                class="modal fade"
                :class="{ show: showRejectModal, 'd-block': showRejectModal }"
              >
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">填写拒绝原因</h5>
                      <button
                        type="button"
                        class="btn-close"
                        @click="closeRejectModal"
                      ></button>
                    </div>
                    <div class="modal-body">
                      <textarea
                        v-model="rejectReason"
                        class="form-control"
                        rows="3"
                        placeholder="请输入拒绝原因..."
                      ></textarea>
                    </div>
                    <div class="modal-footer">
                      <button
                        type="button"
                        class="btn btn-secondary"
                        @click="closeRejectModal"
                      >
                        取消
                      </button>
                      <button
                        type="button"
                        class="btn btn-primary"
                        @click="handleReject"
                      >
                        提交
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div
                v-if="showRejectModal"
                class="modal-backdrop fade show"
              ></div>
            </template>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import {getPeriodicalSensitiveWord,getManuscriptPage,updateManuscriptStatus,backManuscriptStatus} from "@/api/yunchuangApi";
const periodicalSensitiveWordList = ref([]);
const manuscriptPageList = ref([]);
const total = ref(0);
const create = async () => {
  let result = await getPeriodicalSensitiveWord();
  let result2 = await getManuscriptPage();
  manuscriptPageList.value = result2.data.items;
  total.value = result2.data.total;
  periodicalSensitiveWordList.value = result.data;
  console.log(total.value);
};
create();

import { ref } from "vue";

const activeTab = ref(0);
const tabs = ref([
  {
    title: "敏感词汇总",
    content: `研究团队内容`,
  },
  {
    title: "待审核稿件",
    content: "组织结构内容",
  },
]);
import { reactive } from "vue";
import {ElMessage} from "element-plus";
// 敏感词数组
// const sensitiveWords = ["抄袭", "剽窃"];

const tableData = reactive([
  {
    id: 1,
    name: "芸窗期刊采编系统设计与实现",
    authors: "陈启迪",
    periodical: "计算机技术",
    content: "稿件内容",
  },
  {
    id: 2,
    name: "饕餮智能ai随机选餐",
    authors: "陈启迪",
    periodical: "计算机技术",
    content: "稿件内容",
  },
]);
// 查看相关状态
const showDetailModal = ref(false);
const selectedItem = ref(null);

// 拒绝相关状态
const showRejectModal = ref(false);
const rejectReason = ref("");
let currentRejectId = null;

// 打开查看详情模态框
const showDetail = (item) => {
  selectedItem.value = item;
  showDetailModal.value = true;
};

const closeDetailModal = () => {
  showDetailModal.value = false;
};

const handleApprove = async (id) => {
  try {
    // 模拟API调用
    await mockApiCall(id, "approved");
    const item = tableData.find((i) => i.id === id);
    if (item) item.status = "已通过";
  } catch (error) {
    console.error("操作失败:", error);
  }
  let result = updateManuscriptStatus(id);
  ElMessage({
    message:result.message?result.message:"操作成功" ,
    type: 'success',
  })
  manuscriptPageList.value = (await getManuscriptPage(id)).data.items;
};

const showRejectDialog =async (id) => {
  // alert(id);
  currentRejectId = id;
  showRejectModal.value = true;
};

const handleReject = async () => {
  if (!rejectReason.value.trim()) {
    alert("请填写拒绝原因");
    return;
  }
  const data={
    id:currentRejectId,
    remark:rejectReason.value
  }
  try {
    // 模拟API调用
    await backManuscriptStatus(data);
    const item = tableData.find((i) => i.id === currentRejectId);
    if (item) {
      item.status = "已拒绝";
      item.rejectReason = rejectReason.value;
    }
    closeRejectModal();
  } catch (error) {
    console.error("操作失败:", error);
  }
  // Element.Message.success("操作成功");
  getManuscriptPage();
};

const closeRejectModal = () => {
  showRejectModal.value = false;
  rejectReason.value = "";
  currentRejectId = null;
};

// 模拟API请求
const mockApiCall = (id, status, reason) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(
        `更新记录 ${id} 状态为 ${status}`,
        reason ? `原因：${reason}` : ""
      );
      resolve();
    }, 500);
  });
};
</script>

<style scoped>
.nav-link,
.nav-link:hover {
  color: var(--jiqiu-color);
}
li > a {
  color: var(--jiqiu-color);
}
.nav-pills .nav-link {
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}
.custom-divider {
  height: 2px;
  background-color: var(--jiqiu-color);
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}
.col {
  color: var(--jiqiu-color);
  font-size: 1.5rem;
  padding: 3rem 3rem;
}
.nav-pills .nav-link.active {
  background-color: var(--jiqiu-color);
  color: white !important;
}

.content-box {
  min-height: 600px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.teacher-card {
  height: 460px;
  text-align: center;
  padding: 20px;
  border: 1px solid #ddd;
  margin-bottom: 20px;
}

.teacher-image {
  width: 100%;
  max-width: 200px;
  border-radius: 50%;
  margin-bottom: 10px;
}
thead {
  color: var(--jiqiu-color) !important;
}
/* PC端研究人员表格 */
@media (min-width: 768px) {
  table > thead > tr:first-child {
    background-color: #fff;
    border-bottom: 3px solid rgba(43, 57, 118, 0.5);
  }
  tbody td {
    background-color: #ffffff;
    border-bottom: 1px solid var(--jiqiu-color);
  }
  /* 设置移过的行背景颜色 */
  tbody tr {
    background-color: rgba(43, 57, 118, 0.3); /* 这里可以替换为你想要的颜色 */
  }
}
/* 平板与手机端研究人员表格 */
@media (max-width: 1068px) {
  table {
    border: 0;
  }

  table thead {
    display: none;
  }

  table tr {
    display: block;
    margin-bottom: 1rem;
    border: 3px solid var(--jiqiu-color);
    border-radius: 0.375rem;
  }

  table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: right;
    padding: 0.5rem;
    border-bottom: 1px solid var(--jiqiu-color);
  }

  table td::before {
    content: attr(data-label);
    font-weight: 500;
    margin-right: auto;
    padding-right: 1rem;
  }

  table td:last-child {
    border-bottom: 0;
  }
}
</style>